<template>
  <view style="height: 100%">
    <!--    <view class="inp">-->
    <!--      <u-search-->
    <!--        :show-action="false"-->
    <!--        placeholder="搜索城市/区县/地点"></u-search>-->
    <!--    </view>-->
    <!--    <view class="diTop">-->
    <!--      <view class="flex at f14 c3">-->
    <!--        <image-->
    <!--          src="../../../../static/ding.png"-->
    <!--          mode=""-->
    <!--          class="dwP"-->
    <!--          mode="widthFix"></image>-->
    <!--        <view class="foText">-->
    <!--          当前选择：-->
    <!--          <text>北京市第一中学</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="ml flex at f12">-->
    <!--        <image-->
    <!--          src="../../../../static/zhuan.png"-->
    <!--          mode=""-->
    <!--          class="qhP"-->
    <!--          mode="widthFix"></image>-->
    <!--        <view class="chect">刷新定位</view>-->
    <!--      </view>-->
    <!--    </view>-->

    <view class="flex at acvitex">
      <view class="TuiJ">
        <view
          v-for="(item, index) in listchMu"
          :key="index"
          :class="active === index ? 'acvie' : 'acvi'"
          @click="leftClickHandle(index, item.id, item.name)">
          <view class="acvi1"></view>
          <text class="tress">
            {{ item.name }}
          </text>
        </view>
      </view>
      <view style="width: 100%;">
        <view>
          <view class="quBox">
            <view class="quBox_l minBox">
              <view
                class="quBox_text"
                v-for="(item, index) in newmapProvience"
                :class="provienceActive === index ? 'active' : ''"
                :key="index"
                @click="rightprovicenClickHandle(index, item.id, item.name)">
                {{ item.name }}
              </view>
            </view>
            <view class="quBox_l minBox">
              <view
                class="quBox_text"
                v-for="(item, index) in newmapCity"
                :class="cityActive === index ? 'active' : ''"
                :key="index"
                @click="rightcityClickHandle(index, item.id, item.name)">
                {{ item.name }}
              </view>
            </view>
            <view class="quBox_r minBox">
              <view
                class="quBox_text"
                v-for="(item, index) in newareaDataCity"
                :class="countyActive === index ? 'active' : ''"
                :key="index"
                @click="rightcountyClickHandle(index, item.id, item.name)">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import http from "@/shopro/request/index.js";
export default {
  data() {
    return {
      leftMenuList: [],
      //选择的状态
      active: "",
      provienceActive: "",
      cityActive: "",
      countyActive: "",
      newmapProvience: [],
      listchMu: [],
      mapCity: [],
      areaDataCity: [],
      countys_id: "",
      provicen_id: "",
      city_id: "",
      county_id: "",
      provicen_name: "",
      city_name: "",
      county_name: "",
      newmapCity: [],
      newareaDataCity: [],
	    select_type:''
    };
  },
  watch: {
    active(val, old) {
      let arr = [];
      this.newmapProvience = [];
      this.newmapCity = [];
      this.newareaDataCity = [];
      this.countys_name = this.listchMu[val].name;
      if (this.listchMu[val].child.length > 0) {
        arr = this.listchMu[val].child;
        this.newmapProvience = arr;
        this.provicen_pid = this.newmapProvience[0].id;
        this.provicen_name = this.newmapProvience[0].name;
      }
      this.provienceActive = 0;
      this.cityActive = 0;
      this.countyActive = 0;
      if (this.newmapProvience[0].child.length > 0) {
        this.newmapCity = this.newmapProvience[0].child;
        this.city_name = this.newmapCity[0].name;
      }
      if (this.newmapCity[0].child.length > 0) {
        this.newareaDataCity = this.newmapCity[0].child;
        this.county_name = this.newareaDataCity[0].name;
      }
      console.log(val, "省份====", this.newmapProvience);
    },
    provienceActive(val, old) {
      if (val != "" || val == 0) {
        let arr = [];
        this.newmapCity = [];
        this.newareaDataCity = [];
        if (this.newmapProvience[val].child.length > 0) {
          arr = this.newmapProvience[val].child;
          this.newmapCity = arr;
          this.city_pid = this.newmapCity[0].id;
          this.city_name = this.newmapCity[0].name;
          console.log(val, "城市====", this.newmapCity);
        }
        this.cityActive = 0;
        this.countyActive = 0;
        if (this.newmapCity[0].child.length > 0) {
          this.newareaDataCity = this.newmapCity[0].child;
          this.county_name = this.newareaDataCity[0].name;
        }
      }
    },
    cityActive(val, old) {
      if (val != "" || val == 0) {
        this.newareaDataCity = [];
        if (this.newmapCity[val].child.length > 0) {
          this.newareaDataCity = this.newmapCity[val].child;
          this.county_pid = this.newareaDataCity[0].id;
          this.county_name = this.newareaDataCity[0].name;
        }
        this.countyActive = 0;
        console.log(val, "县区====", this.newareaDataCity);
      }
    },
  },
  onLoad(options) {
    this.getArea();
  },
  methods: {
    leftClickHandle(index, id, name) {
      this.provienceActive = 0;
      this.cityActive = 0;
      this.countyActive = 0;
      this.countys_name = name;
      this.provicen_name = "";
      this.city_name = "";
      this.county_name = "";
      console.log("-=====", name);
      this.active = index;
    },
    rightprovicenClickHandle(index, id, name) {
      console.log("-=====", name);
      this.cityActive = 0;
      this.countyActive = 0;
      this.provicen_name = name;
      this.city_name = "";
      this.county_name = "";
      this.provienceActive = index;
    },
    rightcityClickHandle(index, id, name) {
	    this.countyActive = 0;
	    this.city_name = name;
	    this.county_name = '';
	    this.cityActive   = index;
    },
    rightcountyClickHandle(index, id, name) {
      this.countyActive = index;
      this.county_name = name;
      uni.setStorageSync("cityName", this.city_name);
      uni.setStorageSync("countyName", this.county_name);
      uni.setStorageSync("countyId", id);
      uni.setStorageSync("countyIds", id);
      uni.setStorageSync("wenhua_shuanxi", 1);
	  uni.setStorageSync("project_shuanxi", 1);
	  uni.removeStorageSync("areacity");
      uni.navigateBack();
    },
    // 获取省市区
    getArea() {
      this.$new_http("address.areaIndex").then((res) => {
        console.log("====", res);
        this.listchMu = res.data;
        this.active = 0;
        if (this.listchMu[0].child) {
          this.newmapProvience = this.listchMu[0].child;
          if (this.listchMu[0].child[0].child) {
            this.newmapCity = this.listchMu[0].child[0].child;
            if (this.listchMu[0].child[0].child[0].child) {
              this.newareaDataCity = this.listchMu[0].child[0].child[0].child;
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}

.quBox {
  display: flex;
  background-color: #fff;
	width: 100%;
  .quBox_l {
    width: 50%;
    padding-left: 10rpx;
    .quBox_text {
      height: 88rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333;
      text-align: left;
      display: flex;
      align-items: center;
    }
    .active {
      color: #ed861f;
      background: #f7f7f7;
    }
  }

  .quBox_r {
    width: 302rpx;
    padding-left: 10rpx;
    .quBox_text {
      height: 88rpx;

      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333;
      line-height: 88rpx;
      text-align: center;
    }
    .active {
      color: #ed861f;
      background: #f7f7f7;
    }
  }
}

.inBox {
  .TinBox {
    margin-bottom: 28rpx;
    width: 492rpx;
    height: 136rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-between;
    padding-left: 8rpx;

    .TinBoxL {
      margin-top: 8rpx;
      margin-right: 20rpx;

      .TinBoxLImg {
        width: 146rpx;
        height: 120rpx;
      }
    }

    .TinBoxR {
      width: 100%;

      .TinBoxT {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;

        .TinBoxT_l {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .TinBoxT_R {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-right: 24rpx;
        }
      }

      .TinBoxB {
        margin-top: 20rpx;
        display: flex;

        .TinBoxBImg {
          width: 20rpx;
          height: 23rpx;
          margin-top: 5rpx;
        }

        .TinBoxB_r {
          margin-left: 12rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
}
.active {
  color: #ed861f;
  background: #f7f7f7;
}
.minBox {
  height: 100vh;
  overflow-y: scroll;
}

.tabs {
  display: flex;
  /* flex: 1; */
  justify-content: flex-start;
  flex-wrap: wrap;
}

.tabsText {
  width: 140rpx;
  height: 52rpx;
  background: #f5f5f5;
  border-radius: 26rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 52rpx;
  margin: 24rpx 2%;
  text-align: center;
  font-style: normal;
}

.inp {
  background-color: #fff;
  padding: 0 30rpx 30rpx;
}

.TuiJ {
  width: 40%;
  height: 100vh;
  background: #f5f5f5;
  overflow-y: scroll;
}

.diTop {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin-top: 12rpx;
  padding: 34rpx 30rpx 0;
  height: 108rpx;
}

.chect {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #ed861f;
  line-height: 33rpx;
  text-align: center;
}

.foText {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  margin-left: 6rpx;
}

.dwP {
  width: 28rpx;
  height: 28rpx;
  margin-top: 5rpx;
}

.qhP {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  margin-top: 5rpx;
}

.acvitex {
  height: calc(100% - 104px);
  background: #fff;
  width: 100%;
}

.acvi,
.acvie {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  position: relative;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  margin-top: 40rpx;
}

.tress {
  margin-left: 54rpx;
  text-align: left;
}

.acvie {
  color: #ed861f;
}

.acvi1 {
  width: 4rpx;
  height: 16rpx;
  background-color: #ed861f;
  position: absolute;
  top: 13rpx;
  left: 35rpx;
}

.acvi1::before {
  width: 4rpx;
  height: 16rpx;
  background-color: #f5f5f5;
}
</style>
